<template>
  <div style="width: 100%; height: 100%; display: flex; flex-flow: column wrap; justify-content: space-between">
    <div style="width: 100%; height: 100%">
      <div class="bgs">
        <Echart :options="options1" height="100%" width="100%"></Echart>
      </div>
    </div>
<!--    <div style="width: 49.5%; height: 49%">-->
<!--      <div class="bgs">-->
<!--        <Echart :options="options2" height="100%" width="100%"></Echart>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div style="width: 49.5%; height: 49%">-->
<!--      <div class="bgs">-->
<!--        <Echart :options="options3" height="100%" width="100%"></Echart>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div style="width: 49.5%; height: 49%">-->
<!--      <div class="bgs">-->
<!--        <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">-->
<!--          <dv-scroll-board :config="config" style="width: 95%; height: 90%; border-radius: 10%"/>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  name: "index",
  components: {
    Echart
  },
  data() {
    return {
      options1: {
        title: {
          text: "TAT统计",
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: [20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160]
        },
        yAxis: {
          type: 'value'
        },
        legend: {
          show: true,
          top: "bottom"
        },
        tooltip: {},
        series: [{
          name: "TAT样本数量",
          data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
        }]
      },
      options2: {
        title: {
          text: "TAT超时样本统计",
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom',
          left: 'center',
          orient: "vertical"
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '正常样本', itemStyle: {color: '#59ff00'}},
              {value: 1048, name: '超时样本', itemStyle: {color: '#ff0000'}}
            ]
          }
        ]
      },
      options3: {
        title: {
          text: "最关心的项目TAT情况",
          left: "center"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // Use axis to trigger tooltip
            type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          data: ['未超时', '超时'],
          top: "8%"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
        },
        series: [
          {
            name: '未超时',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: 'green'
            }
          },
          {
            name: '超时',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: [0, 0, 0, 0, 0, 0, 0],
            itemStyle: {
              color: 'red'
            }
          }
        ]
      },
      config: {
        headerBGC: "rgb(97 89 89 / .6)",
        header: ['列1', '列2', '列3'],
        rowNum: 10,
        data: [
          ['行1列1', '行1列2', '行1列3'],
        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$http.post(this.urlInterface.getTatData).then(res => {
        let data = res.data.data
        //柱状图1
        this.options1.xAxis.data = data.one_x
        this.options1.series[0].data = data.one_y
        this.options2.series[0].data[0].value = data.two_ok
        this.options2.series[0].data[1].value = data.two_timeOut
        console.log(data, '热散热色')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/public.scss";

</style>
